<template>
  <div class="game-container">
    <div class="game-board" ref="gameBoard"></div>
    <div class="score">Score: {{ gameStore.score }}</div>
    <div class="speed-control">
      <span>速度: </span>
      <input type="range" min="1" max="10" v-model="speedLevel" @input="updateSpeed" />
      <span>{{ speedLevel }}</span>
    </div>
    <div>
      <button style="margin-right: 20px" @click="startGame">开始游戏</button>
      <button @click="resetGame">重新开始</button>
    </div>
    <div v-if="gameOver" class="game-over-modal">
      <div class="modal-content">
        <h2>游戏结束</h2>
        <button @click="resetGame">重新开始</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from "vue";
import { useGameStore } from "../stores/game";

const gameStore = useGameStore();
const gameBoard = ref<HTMLElement | null>(null);
let score = gameStore.score;
const speedLevel = ref(5);
const gameOver = ref(false);

const updateSpeed = () => {
  gameStore.updateSpeed(speedLevel.value);
};

const startGame = () => {
  gameStore.startGame();
};

const resetGame = () => {
  gameStore.resetGame();
};

onMounted(() => {
  if (gameBoard.value) {
    gameStore.initGame(gameBoard.value);
  }

  watch(
    () => gameStore.gameOver,
    (newVal) => {
      gameOver.value = newVal;
    }
  );

  window.addEventListener("keydown", (e) => {
    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) return;
    const newDirection = e.key;

    // Prevent reverse direction
    if (
      (newDirection === "ArrowUp" && gameStore.direction === "DOWN") ||
      (newDirection === "ArrowDown" && gameStore.direction === "UP") ||
      (newDirection === "ArrowLeft" && gameStore.direction === "RIGHT") ||
      (newDirection === "ArrowRight" && gameStore.direction === "LEFT")
    ) {
      return;
    }
    if (!gameStore.isPlaying) {
      startGame();
    }
    switch (e.key) {
      case "ArrowUp":
        gameStore.direction = "UP";
        break;
      case "ArrowDown":
        gameStore.direction = "DOWN";
        break;
      case "ArrowLeft":
        gameStore.direction = "LEFT";
        break;
      case "ArrowRight":
        gameStore.direction = "RIGHT";
        break;
    }
  });
});

onUnmounted(() => {
  gameStore.cleanup();
  // 修复 removeEventListener 参数不足的问题，添加事件处理函数作为第二个参数
  const handleKeyDown = (e) => {
    switch (e.key) {
      case "ArrowUp":
        gameStore.direction = "UP";
        break;
      case "ArrowDown":
        gameStore.direction = "DOWN";
        break;
      case "ArrowLeft":
        gameStore.direction = "LEFT";
        break;
      case "ArrowRight":
        gameStore.direction = "RIGHT";
        break;
    }
  };
  window.removeEventListener("keydown", handleKeyDown);
});
</script>

<style scoped>
.game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-board {
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  position: relative;
}

.score {
  margin: 10px 0;
  font-size: 20px;
}

.speed-control {
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.speed-control input[type="range"] {
  width: 150px;
}

button {
  padding: 10px 20px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.game-over-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}
</style>
